<!-- 运费管理 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <el-card
      v-loading="listLoading"
      class="box-card"
      shadow="never"
      element-loading-text="加载中"
    >
      <el-button
        type="warning"
        style="margin-bottom:20px"
        @click="handleAddFreight()"
      >新增模板</el-button>
      <div>
        <template>
          <el-table
            :data="tableData"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="templateType"
              label="模板类型"
            >
            </el-table-column>
            <el-table-column
              prop="transportType"
              label="运送类型"
            >
            </el-table-column>
            <el-table-column
              prop="associatedCityList"
              label="关联城市"
              width="400"
            >
            </el-table-column>
            <el-table-column
              prop="firstWeight"
              label="首重"
            >
            </el-table-column>
            <el-table-column
              prop="continuousWeight"
              label="续重"
            >
            </el-table-column>
            <el-table-column
              prop="lightThrowingCoefficient"
              label="轻抛系数"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="操作"
              width="150"
              align="center"
            >
              <template #default="scope">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="handleAddFreight(scope.row)"
                >编辑</el-link>
                <el-divider direction="vertical"></el-divider>
                <el-link
                  type="danger"
                  :underline="false"
                  @click="handleDelFreight(scope.row.id)"
                >删除</el-link>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </el-card>
    <!--
      :title-info="titleInfo"
      :agency-options="agencyOptions"
      -->
    <freightDialog
      ref="addFreight"
      class="add-form-dialog"
      :title-info="titleInfo"
      :form-base="formData"
      @newDataes="getListDia"
    ></freightDialog>
  </div>
</template>

<script>
import { freightManageList, freightManageDelete } from '@/api/transit'
import freightDialog from './components/freight-add.vue'
export default {
  components: {
    freightDialog
  },
  data() {
    return {
      tableData: [],
      listLoading: true,
      titleInfo: {
        text: ''
      },
      // 模板类型转换对象
      templateTypeObj: {
        1: '同城寄',
        2: '省内寄',
        3: '经济区互寄',
        4: '跨省'
      },
      // 运送类型转换对象
      transportTypeObj: {
        1: '普快',
        2: '特快'
      },
      // 关联城市转换对象
      associatedCityListObj: {
        1: '全国',
        2: '京津翼',
        3: '江浙沪',
        4: '川渝',
        5: '黑吉辽'
      },
      // 新增弹窗页面数据集合
      formData: {
        associatedCityList: '全国',
        continuousWeight: '',
        firstWeight: null,
        lightThrowingCoefficient: '',
        templateType: '',
        transportType: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表数据
    async getList() {
      const res = await freightManageList()
      // console.log(res)
      res.data.forEach(item => {
        item.templateType = this.templateTypeFn(item.templateType, this.templateTypeObj)
        item.transportType = this.transportTypeFn(item.transportType, this.transportTypeObj)
        item.associatedCityList = this.associatedCityListFn(item.associatedCityList, this.associatedCityListObj)
      })
      this.tableData = res.data
      this.listLoading = false
    },
    // 模板类型转换函数
    templateTypeFn(value, obj) {
      return obj[value]
    },
    // 运送类型转换函数
    transportTypeFn(value, obj) {
      return obj[value]
    },
    // 关联城市转换函数
    associatedCityListFn(cityList, obj) {
      const list = cityList.map(item => {
        return obj[item]
      })
      return list.join(',')
    },
    // 显示新建模板弹窗
    handleAddFreight(data) {
      if (data) {
        // 转换数据
        const editArr = { ...data }
        // console.log(editArr)

        // 将数据赋予给formData，传给子组件进行展示使用
        const list = editArr.associatedCityList.split(',')
        const arr = []
        list.forEach(item => {
          for (const key in this.associatedCityListObj) {
            if (item === this.associatedCityListObj[key]) {
              arr.push(key)
            }
          }
        })
        this.formData.associatedCityList = arr
        this.formData.continuousWeight = editArr.continuousWeight
        this.formData.firstWeight = editArr.firstWeight
        this.formData.lightThrowingCoefficient = editArr.lightThrowingCoefficient
        this.formData.templateType = editArr.templateType
        this.formData.transportType = editArr.transportType
        this.formData.id = editArr.id
        this.titleInfo.text = '编辑模板'
        this.$refs.addFreight.dialogFormV()
      } else {
        this.$refs.addFreight.dialogFormV()
        this.titleInfo.text = '新增模板'
        this.formData.associatedCityList = ['1']
        this.formData.continuousWeight = ''
        this.formData.firstWeight = ''
        this.formData.lightThrowingCoefficient = ''
        this.formData.templateType = ''
        this.formData.transportType = ''
        this.formData.id = ''
      }
    },
    // 子组件新增或编辑成功，通知父组件更新列表
    getListDia() {
      this.getList()
    },
    // 删除运费模板
    handleDelFreight(id) {
      this.$confirm('确定要删除运费模板吗?', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.change(id)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    async change(id) {
      await freightManageDelete(id).then((res) => {
        // 异常不处理，信息不外抛。。。。
        if (String(res.code) === '200') {
          this.$message.success('删除成功')
          this.getList()
        } else {
          this.$message.error(res.msg || '删除失败')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
.waybill-list {
  .el-dialog__wrapper {
    ::v-deep .el-dialog__body {
      padding-left: 0px;
    }
  }
  .box-card {
    margin: 20px;
  }
}
</style>
